<template>
  <div class="rightbackground">
    <div class="title-header">
      <img src="/assets/base/layerTree.png" class="icon-layertree" />
      <span><i>管线概况</i></span>
    </div>
    <div class="right-container" id="right-container1">
      <div class="title2">
        <span style="margin-left: 20px"><i>管线类型统计</i></span>
      </div>
      <div class="chart-container">
        <div style="height: 100%; width: 100%" ref="chart3Ref"></div>
      </div>
    </div>
    <div class="right-container" id="right-container2">
      <div class="title2">
        <span style="margin-left: 20px"><i>监控统计</i></span>
      </div>
      <div class="metrics">
        <div class="metrics-grid">
          <!-- 指标1 -->
          <div class="metric">
            <i class="icon total-length"></i>
            <div class="text">
              <p>管廊总长度</p>
              <span class="value">223.8</span> 公里
            </div>
          </div>

          <!-- 指标2 -->
          <div class="metric">
            <i class="icon main-line-length"></i>
            <div class="text">
              <p>干线管廊长度</p>
              <span class="value">112.3</span> 公里
            </div>
          </div>

          <!-- 指标3 -->
          <div class="metric">
            <i class="icon branch-line-length"></i>
            <div class="text">
              <p>支线管廊长度</p>
              <span class="value">56.2</span> 公里
            </div>
          </div>

          <!-- 指标4 -->
          <div class="metric">
            <i class="icon loop-line-length"></i>
            <div class="text">
              <p>缆线管廊长度</p>
              <span class="value">65.3</span> 公里
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-container" id="right-container3"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import * as echarts from "echarts"
import { onMounted } from "vue"

const chart3Ref = ref<HTMLElement | null>(null)

onMounted(() => {
  const chart3 = echarts.init(chart3Ref.value)
  chart3.setOption({
    title: {
      text: "610.2公里\n管线总长度",
      left: "28%",
      top: "40%",
      textStyle: {
        color: "#ffffff",
        fontSize: 16,
        fontWeight: "bold",
        lineHeight: 30
      }
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      right: "10%",
      top: "center",
      textStyle: {
        color: "#ffffff"
      }
    },
    series: [
      {
        name: "管线类型",
        type: "pie",
        radius: ["40%", "60%"], // 环形的内外半径
        center: ["40%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "16",
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 20, name: "污水管道", itemStyle: { color: "#d52fe0" } },
          { value: 30, name: "雨水管道", itemStyle: { color: "#71eef4" } },
          { value: 25, name: "合流管道", itemStyle: { color: "#de8938" } },
          // { value: 18, name: "再生水管线", itemStyle: { color: "#66d9ff" } },
          // { value: 15, name: "热力管线", itemStyle: { color: "#ff6666" } }
        ]
      }
    ]
  })
  window.addEventListener("resize", () => {
    chart3.resize()
  })
})
</script>

<style lang="less">
.rightbackground {
  background-image: url("/assets/base/rightMenuBackground.png");
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}

.title-header {
  height: 15%;
  width: 100%;
  background-image: url("/assets/base/title1_bg.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20px;
}

.icon-layertree {
  width: 24px;
  height: 24px;
  margin: 5px 8px;
}

.right-container {
  width: 100%;
  height: 100%;
  color: #ffffff;
}

.title2 {
  background-image: url("/assets/base/title2_bg.png");
  background-size: 100% 100%;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}
</style>
